<template>
  <div id="order_table">
    <!-- 表格 -->
    <el-table :data="orderList" stripe style="width: 100%">
      <el-table-column prop="id" label="订单编号" width="180" align="center" />
      <el-table-column prop="orderTime" label="下单时间" align="center" />
      <el-table-column prop="total" label="总价" align="center" />
      <el-table-column prop="status" label="状态" align="center" />
      <el-table-column prop="customerId" label="顾客ID" align="center" />
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="details(scope.row.id)">详情</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页按钮 -->
    <el-pagination :current-page.sync="currentPage1" :page-size="pageSize" layout="total, prev, pager, next" :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
  </div>
</template>
<script>
import qs from 'querystring'// 将json字符串转化为查询字符串
export default {
  data() {
    return {
      orders: [],
      currentPage1: 1,
      pageSize: 6,
      total: 0,
      name2: ''
    }
  },
  computed: {
    orderList() {
      this.orders.forEach((item) => {
        item.orderTime = new Date(item.orderTime).toLocaleDateString()
      })
      return this.orders
    }
  },
  methods: {
    // 给详情按钮绑定事件
    details(id) {
      // alert(id);
      this.$router.push({ path: '/orderManger-details/index', query: { id: id }})
    },
    // 分页按钮的函数
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.currentPage1 = val
      this.sendItem(this.name2)
    },
    sendItem(name) {
      this.name2 = name
      // alert(name)   name->status
      if (name == '所有订单') {//eslint-disable-line
        var data = {
          page: this.currentPage1 - 1,
          pageSize: this.pageSize
        }
      } else {
        var data = {//eslint-disable-line
          page: this.currentPage1 - 1,
          pageSize: this.pageSize,
          status: this.name2
        }
      }

      this.$axios.post('/order/queryPage', qs.stringify(data)).then(res => {
        console.log(res)
        this.orders = res.data.data.list
        this.total = res.data.data.total
      })
    }
  }

}
</script>
<style lang="scss" scoped>

</style>
